Mac安装Vue调试工具vue

您所在的位置:网站首页 mac vue开发 Mac安装Vue调试工具vue

Mac安装Vue调试工具vue

2024-07-13 13:29| 来源: 网络整理| 查看: 265

Mac安装Vue调试工具vue-devtools

文章目录 Mac安装Vue调试工具vue-devtools通过github下载安装1.github下载2.安装插件3.vue-devtools使用 收藏猫插件安装1.下载插件2.安装插件 本文主要介绍在无法翻墙的情况下安装Chrome插件vue-devtools的方法。如果你比较懒,请直接通过目录跳转到 收藏猫插件安装。 背景:Mac、Chrome、vue-devtools、github

通过github下载安装 1.github下载 从github下载 git clone https://github.com/vuejs/devtools.git 下载安装依赖包 cd devtools npm install

注: npm install时,笔者这里报错,错误为ERESOLVE unable to resolve dependency tree。关于这个错误的具体原因与解决方法,可以看这里。

解决完报错,安装完依赖包后运行npm run build,正当我满心欢喜等待编译打包成功的时候,又报了如下的错误: lerna ERR! yarn run build exited 2 in '@vue/devtools-api' lerna ERR! yarn run build exited 2 in '@vue/devtools-api'

然后开始安装yarn,当在终端输入npm install -g yarn安装全局yarn时,又报错了,错误如下:

npm ERR! code EACCES npm ERR! syscall mkdir npm ERR! path /usr/local/lib/node_modules/yarn npm ERR! errno -13 npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/yarn' npm ERR! [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/yarn'] { npm ERR! errno: -13, npm ERR! code: 'EACCES', npm ERR! syscall: 'mkdir', npm ERR! path: '/usr/local/lib/node_modules/yarn' npm ERR! } npm ERR! npm ERR! The operation was rejected by your operating system. npm ERR! It is likely you do not have the permissions to access this file as the current user npm ERR! npm ERR! If you believe this might be a permissions issue, please double-check the npm ERR! permissions of the file and its containing directories, or try running npm ERR! the command again as root/Administrator. npm ERR! A complete log of this run can be found in: npm ERR! /Users/yourname/.npm/_logs/2022-04-14T03_06_37_438Z-debug-0.log

报错原因权限不够,执行sudo -s,再执行npm install -g yarn即可,yarn安装后,接着执行:

yarn install yarn run build 编译打包成功后进入packages目录下生成shell-chrome文件夹,此文件夹就是最后要放到扩展程序里的文件夹。 2.安装插件 打开Chrome浏览器->更多工具->扩展程序->打开开发者模式点击加载已解压的扩展程序,选择刚刚生成的shell-chrome文件夹 3.vue-devtools使用

Vue项目,打开开发者工具(F12),选择Vue就可以使用了: 在这里插入图片描述

收藏猫插件安装

收藏猫插件提供了一个下载vue-devtools插件的地址,你需要做的只有下载->拖拽到到Chrome浏览器,。

1.下载插件

插件地址在这里:https://chrome.pictureknow.com/extension?id=d50143a5f53d406dbe992277bfc90521

2.安装插件

打开Chrome浏览器->更多工具->扩展程序->打开开发者模式,然后将.crx文件拖拽进来即可。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3